<template>
  <div>
    <h1>Switch 开关</h1>
    <p>表示两种相互对立的状态间的切换，多用于触发「开/关」。</p>
    <el-switch
      v-model="value"
      active-color="#13ce66"
      inactive-color="#ff4949"
      :width="200"
    active-text="打开"
    inactive-text="关闭"
    :active-value="true"
    :inactive-value="false">
    </el-switch>
    <br>
    <el-switch
      v-model="value1"
      @change="switchChange"
      ref="sw">
    </el-switch>
    <el-button @click="switchFocus">调用方法</el-button>
  </div>
</template>

<script>
export default {
  name: "SwitchComponent",
  data() {
    return {
      value: true,
      value1: false
    }
  },
  methods: {
    switchChange(value){
      console.log(value);
    },
    switchFocus(){
      // 方法调用
      this.$refs.sw.focus();
      console.log("获取焦点");
    }
  }
}
</script>

<style scoped>

</style>
